<html>
<head>
    <title>高德地图轨迹回放，消息框内展示车辆信息且随车辆移动</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=ce49a4f8ed20d5ea9b21516aaddbf456&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch,AMap.Heatmap,AMap.Size" type="text/javascript"></script>
    <style>
        .amap-info-content {
            background: rgb(255 255 255);
            padding: 0;
            max-width: 500px;
        }
    </style>
</head>
<body>
<div id="map" style="height: 100%;width: 100%;"></div>
</body>
<script type="text/javascript">
    // 车辆轨迹、速度数据
    var routeInfo = [
        {"line":8,"carID":"苏A12345","lng":116.494194,"lat":39.860557,"speed":30},
        {"line":8,"carID":"苏A12345","lng":116.495077,"lat":39.862905,"speed":50},
        {"line":8,"carID":"苏A12345","lng":116.499261,"lat":39.864356,"speed":60},
        {"line":8,"carID":"苏A12345","lng":116.499237,"lat":39.868669,"speed":80},
        {"line":8,"carID":"苏A12345","lng":116.503616,"lat":39.869087,"speed":65},
        {"line":8,"carID":"苏A12345","lng":116.474086,"lat":39.870166,"speed":58},
        {"line":8,"carID":"苏A12345","lng":116.468884,"lat":39.870064,"speed":65},
        {"line":8,"carID":"苏A12345","lng":116.462335,"lat":39.870078,"speed":30},
        {"line":8,"carID":"苏A12345","lng":116.461624,"lat":39.872833,"speed":52},
        {"line":8,"carID":"苏A12345","lng":116.461627,"lat":39.877947,"speed":45},
        {"line":8,"carID":"苏A12345","lng":116.461632,"lat":39.881769,"speed":35},
        {"line":8,"carID":"苏A12345","lng":116.457642,"lat":39.883115,"speed":62},
        {"line":8,"carID":"苏A12345","lng":116.447154,"lat":39.883221,"speed":64},
        {"line":8,"carID":"苏A12345","lng":116.443365,"lat":39.883269,"speed":65},
        {"line":8,"carID":"苏A12345","lng":116.432155,"lat":39.880002,"speed":85},
        {"line":8,"carID":"苏A12345","lng":116.42942,"lat":39.879921,"speed":65},
        {"line":8,"carID":"苏A12345","lng":116.425232,"lat":39.883192,"speed":75},
        {"line":8,"carID":"苏A12345","lng":116.424798,"lat":39.887426,"speed":54},
        {"line":8,"carID":"苏A12345","lng":116.422654,"lat":39.890287,"speed":56},
        {"line":8,"carID":"苏A12345","lng":116.424754,"lat":39.892178,"speed":57},
        {"line":8,"carID":"苏A12345","lng":116.427618,"lat":39.892229,"speed":79},
        {"line":8,"carID":"苏A12345","lng":116.433014,"lat":39.895262,"speed":35},
        {"line":8,"carID":"苏A12345","lng":116.428498,"lat":39.896307,"speed":37},
        {"line":8,"carID":"苏A12345","lng":116.423869,"lat":39.896099,"speed":47},
        {"line":8,"carID":"苏A12345","lng":116.414179,"lat":39.895848,"speed":68},
        {"line":8,"carID":"苏A12345","lng":116.408911,"lat":39.899697,"speed":64},
        {"line":8,"carID":"苏A12345","lng":116.398841,"lat":39.899396,"speed":63},
        {"line":8,"carID":"苏A12345","lng":116.395979,"lat":39.89924,"speed":55},
        {"line":8,"carID":"苏A12345","lng":116.390074,"lat":39.898063,"speed":66}
    ]
    // 1. 创建地图
    var map = new AMap.Map("map", {
        zoom: 13,
        view: new AMap.View2D({
        }),
        lang: "zh_cn"
    });

    // 2.创建小汽车marker
    var carMarker = new AMap.Marker({
        map: map,
        position: [routeInfo[0].lng, routeInfo[0].lat],
        icon: "http://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true
    });

    // 3.创建跟速度信息展示框
    var carWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(6, -25),
        content: ""
    });

    // 4.生成车辆回放轨迹
    var pathPolyline = initializePaths(routeInfo);

    // 5.车辆随轨迹移动
    carMarker.moveAlong(pathPolyline.getPath(), 1000, function (k) {
        return k
    }, false);

    // 车辆经过路线样式
    let lineArr = [];
    routeInfo.forEach((item) => {
        lineArr.push([item.lng, item.lat]);
    });
    var passedPolyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        strokeColor: "#AF5", //线颜色
        strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        strokeStyle: "solid"  //线样式
    });
    // 6.速度框随车辆移动
    AMap.event.addListener(carMarker, 'moving', function (e) {
        passedPolyline.setPath(e.passedPath);
        var lastLocation = e.passedPath[e.passedPath.length - 1];
        carWindow.setPosition(lastLocation);
        setVehicleSpeedInWidowns(lastLocation);
    });

    // 7.打开速度框
    carWindow.open(map, carMarker.getPosition());

    // 8.地图自适应缩放
    map.setFitView();


    function initializePaths(paths) {
        var line;
        var pathLngLatArray = new Array();
        if (paths) {
            for (var i = 0; i < paths.length; i++) {
                pathLngLatArray.push(new AMap.LngLat(paths[i].lng, paths[i].lat));
            }
            line = new AMap.Polyline({
                map: map,
                path: pathLngLatArray,
                strokeColor: 'red',
                strokeOpacity: 0.8,
                strokeWeight: 6,
                strokeStyle: 'solid'
            });
            line.setMap(map);
        }
        return line;
    }
    function setVehicleSpeedInWidowns(lnglat) {
        for (var i = 0; i < routeInfo.length; i++) {
            let content = `
					<div style="background: #000;color: #fff;padding: 8px 25px 8px 5px;font-size: 14px;">${routeInfo[i].carID}</div>
					<div style="padding: 0 10px;line-height: 25px;font-size: 14px;">
						<div>所在线路：${routeInfo[i].line}</div>
						<div>所在经度：${routeInfo[i].lng}</div>
						<div>所在纬度：${routeInfo[i].lat}</div>
						<div>速度：${routeInfo[i].speed.toFixed(2)} KM/h</div>
					</div>
				`;
            if (lnglat.distance(new AMap.LngLat(routeInfo[i].lng, routeInfo[i].lat)) < 4) {
                carWindow.setContent(content);
                return;
            }
        }
    }
</script>
</html>
